<template>
	<!-- 寻车 - 筛选下拉菜单 -->
	<view class="find-car-filter">
		<!-- 下拉筛选菜单 -->
		<view class="down-section" :class="downStatus ? 'down-open' : 'down-close'">
			<u-dropdown active-color="#FDD421" ref="uDropdown" @open="open" @close="close" :borderBottom="false" duration="200">
				<u-dropdown-item title="品牌配置">
						<view class="brandaLLBox">
					<scroll-view scroll-y="true" style="height: 1000rpx;" :scroll-into-view="pptoView" scroll-with-animation show-scrollbar class="content-list">
					
							<!-- 全部品牌项 -->
							<view class="brand-all-title flex flex-jc-sb flex-ai-c">
								<view class="allbran" @click="getBrand({ id: '' })">全部品牌</view>
								<view class="carnum">{{ brandTotal }}辆</view>
							</view>

							<!-- 品牌详细列表 -->
							<view v-for="(item, index) in Brandlist" :id="item.initial" :key="item.initial">
								<view class="b-list">
									<view class="list-cell" v-for="(item1, index1) in item.data" :key="index1">
										<view class="brandcss" @tap="getBrand(item1)">
											<view class="iconimg"><image :src="'https://files.yzsheng.com/goodimg/brandimg/' + item1.bid + '.png'" mode="aspectFit"></image></view>
											<view :class="xuanzebrand === item1.bid ? 'brannameZT' : 'branname'">{{ item1.brand }}</view>
											<view class="carnum">{{ item1.carNumber }}条</view>
											<view class="Spin">
												<view :class="xuanzebrand === item1.bid ? 'ppjiantougo' : 'ppjiantou'">
                          <!-- <u-icon name="arrow-right" color="#9A9A9A" size="12rpx"></u-icon> -->
                        </view>
											</view>
										</view>
						
									</view>
								</view>
							</view>
						
					</scroll-view>
					<!-- 字母索引 -->
					<view class="floor flex flex-dir-c flex-jc-sb">
						<view v-for="(item, index) in indexlist" :data-id="item" :key="index" @click="bindToView" class="floor-item">{{ item }}</view>
					</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item :title="typeTitle" :options="zxFindCar.zxType" @change="findCarChange" v-model="zxFindCar.zxTypeValue"></u-dropdown-item>
				<u-dropdown-item :title="areaTitle">
					<view class="brandaLLBox">
						<!-- 列表内容 -->
						<view class="list-content">
						  <scroll-view scroll-y="true" style="height: 1000rpx;" scroll-with-animation show-scrollbar :scroll-into-view="addtoView" class="content-list">
						    <view class="brandcss" @click="regionChange('')">
						      <view class="alladdress">全部地区</view>
						    </view>
						    <view v-for="(item, index) in cityList" :id="item.letter" :key="item.letter">
						      <view class="abcd">{{ item.letter | letter }}</view>
						      <view class="Brandcss">
						        <view class="list-cell" v-for="(item1, index1) in item.data" :key="index1">
						          <view class="city-text" @tap="regionChange(item1.id)">
						            <view class="area">{{ item1.name }}</view>
						          </view>
						        </view>
						      </view>
						    </view>
						  </scroll-view>
						</view>
						
						<!-- 字母索引 -->
						<view class="floor flex flex-dir-c flex-jc-sb">
						  <view v-for="(item, index) in cityList" :data-id="item.letter" :key="item.id" @tap="addressToView">{{ item.letter | letter }}</view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>

	
	</view>
</template>

<script>
import brandList from './brand-list.vue'; // 品牌列表
import regionList from './region-list.vue'; // 地区列表

export default {
	name: 'findCarFilter',
	components: {
		brandList,
		regionList
	},
	props: {
		type: {
			type: Number,
			default: 3
		}
	},
	computed: {
		//品牌车子总条数
		// brandTotal() {
		//   if (this.Brandlist.length !== 0) {
		//     let sum = 0
		//     this.Brandlist.forEach(item => {
		//       item.data.forEach(c => {
		//         sum += c.carNumber
		//       })
		//     })
		//     return sum
		//   } else {
		//     return 0
		//   }
		// }
	},
	data() {
		return {
			typeTitle: '全部类型',
			openIndex: -1, // 下拉打开的标识，品牌是0，地区是1，筛选是2
			downStatus: false, // 下拉筛选打开状态
			zxFindCar: {
				zxTypeValue: -1,
				zxType: [
					{
						label: '全部类型',
						value: -1
					}
				]
			},
			Brandlist: [],
			xuanzebrand: '',
			indexlist: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			pptoView: 'A',
			brandTotal: '',
			cityList:[],
			areaTitle:'地区',
			addtoView:''
		};
	},
	created() {
		this.getSpecification();
		setTimeout(()=>{
			this.init()
		},1000)
		// this.GetCarBrandList();
		this.getCityList()
	},
	computed: {
		listShow() {
			return this.openIndex !== -1;
		}
	},
    filters: {
      // 过滤将letter的值Aa ，转为# 进行显示
      letter(str) {
        return str === 'Aa' ? '#' : str
      }
    },
	methods: {
		// 下拉菜单每下拉一次，都会重新创建此组件
		// 初始化组件时判断车品牌列表如果有数据，则不再请求获取车品牌列表
		init() {
		  let list = this.$store.state.indexHome.carBrandList
		  if (list.length === 0) {
					console.log('findcar111')
		    this.GetCarBrandList() //品牌接口
		  } else {
					// console.log('findcar222')
		    this.Brandlist = list
				if (this.Brandlist.length !== 0) {
					let sum = 0;
					this.Brandlist.forEach(item => {
						item.data.forEach(c => {
							sum += c.carNumber;
						});
					});
					this.brandTotal = sum;
		  }
			}
		},
		getSpecification() {
			this.$api.jsonData
				.specification()
				.then(res => {
					let list = res.data.map(it => {
						return { value: it.id, label: it.name };
					});
					this.zxFindCar.zxType = this.zxFindCar.zxType.concat(list);
				})
				.catch(err => {
					console.log(err);
				});
		},
		

		// 品牌接口请求
		async GetCarBrandList() {
			try {
				const res = await this.$api.common.GetCarBrandList();
				this.Brandlist = res.data;
				if (this.Brandlist.length !== 0) {
					let sum = 0;
					this.Brandlist.forEach(item => {
						item.data.forEach(c => {
							sum += c.carNumber;
						});
					});
					this.brandTotal = sum;
				} else {
					this.brandTotal = 0;
				}
				// console.log(res.data, '品牌')
			} catch (err) {
				console.log(err);
			}
		},
		//获取地址列表
		async getCityList() {
		  try {
		    const { data } = await this.$api.jsonData.regionalCityGroup()
		    this.cityList = data.list.map(item => {
		      // 将#号改成Aa
		      if (item.letter === '#') {
		        return { ...item, letter: 'Aa' }
		      } else {
		        return item
		      }
		    })
		  } catch (e) {
		    console.log(e)
		  }
		},
		// 下拉打开
		open(index) {
			this.downStatus = true; // 打开下拉菜单
			this.$emit('open', index);
		},


		// 品牌字母索引到对应内容
		bindToView(event) {
			var id = event.currentTarget.dataset.id;
			this.pptoView = id;
		},
      // 地址字母索引定位
      addressToView(event) {
        let id = event.currentTarget.dataset.id
        this.addtoView = id
      },
		// 下拉关闭
		close(index) {
			this.$emit('close', index);
			this.downStatus = false; // 打开下拉菜单
		},
		// 封装下拉筛选关闭方法
		downClose() {
			this.$refs.uDropdown.close();
			this.downStatus = false; // 打开下拉菜单
		},


		// // 选择品牌车型款式
		// brandListChange(id) {
		// 	this.$emit('change', { type: 0, id });
		// },
		// 获取品牌
		getBrand(val) {
			let id=val.brand
			this.$emit('change', { type: 0, id });
			this.downClose();
			// this.$emit('getBrandName', val.brand);
				// this.$emit('close')
				// this.downStatus = false; 
			
		},
		// 选择地区
		regionChange(id) {
			// this.areaTitle=this.cityList.find(item => item.value === id).label
			// this.cityList.forEach(it=>{
			// 	it.data.forEach(item=>{
			// 		if(item.id === id){
			// 			this.areaTitle=item.name
			// 		}
			// 	})
			// })
			
			this.$emit('change', { type: 2, id });
			this.downClose();
		},

		// 选择类型
		findCarChange(id) {
			this.typeTitle = this.zxFindCar.zxType.find(item => item.value === id).label;
			this.$emit('change', { type: 1, id });
		}
	}
};
</script>

<style lang="scss" scoped>
.find-car-filter {
	width: 100%;
	position: relative;
	// z-index: 888;
	background-color: #fff;

	// 品牌、地区弹出部分
	.popup-section {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 899;
		overflow: hidden;
		width: 100%;
		height: 100%;

		.content {
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 902;
			width: 100%;
			transform: translateY(100%);
			transition: all 0.3s;

			&.up-show {
				transform: translateY(10%) !important;
			}
		}

		// 遮罩层
		.mask {
			width: 100%;
			height: 100%;
			background: #000;
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s;

			&.mask-show {
				visibility: visible;
				opacity: 0.5;
			}
		}
	}

	.down-sticky {
		.down-rela {
			position: relative;
		}
	}

	// 下拉菜单打开时，给下拉菜单设置高度
	.down-open {
		& /deep/ .u-dropdown__content {
			height: 100vh !important;
		}
	}
	.down-close {
		& /deep/ .u-dropdown__content {
			height: 0 !important;
		}
	}

	.btn {
		width: 100%;
		background-color: #fff;
		display: flex;
	}

	button:first-child {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffe23e;
		line-height: 88rpx;
		width: 331rpx;
		height: 88rpx;
		background: #333333;
		margin: 20rpx 0 20rpx 20rpx;
		border-radius: 44rpx 0rpx 0rpx 44rpx;
	}

	button:last-child {
		margin: 20rpx 20rpx 20rpx 0;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 88rpx;
		width: 331rpx;
		height: 88rpx;
		background: linear-gradient(-90deg, #fdd421, #ffe23e);
		border-radius: 0rpx 44rpx 44rpx 0rpx;
	}

	.sj {
		background-color: #fff;

		text {
			margin-left: 50rpx;
			line-height: 50rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
}
// 筛选 商家类型
.type-box {
	background-color: #fff;

	.pinp {
		display: flex;
		width: 100%;
		flex-wrap: wrap;

		view {
			margin: 20rpx 0 0 42rpx;
			width: 170rpx;
			height: 70rpx;
			background: #f4f4f4;
			border-radius: 35rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 70rpx;
			text-align: center;

			&.active {
				background: linear-gradient(-90deg, #fdd422, #ffe23e) !important;
				border-radius: 35px;
			}
		}
	}

	.line {
		width: calc(100% - 84rpx);
		margin: 40rpx auto 20rpx;
		border-top: 2rpx solid #eee;
	}

	.sort {
		display: flex;

		view {
			width: 170rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background: #f4f4f4;
			border-radius: 35rpx;
			margin: 20rpx 0 0 42rpx;

			&.active {
				background: linear-gradient(-90deg, #fdd422, #ffe23e) !important;
				border-radius: 35px;
			}
		}
	}
}
// .brand-list {
//   background-color: #f6f6f6;
//   height: 100vh;
//   position: relative;

//   .brand-title {
//     padding: 26rpx 0;
//     background-color: #fff;
//     font-size: 36rpx;
//     font-weight: 500;
//     color: #333333;
//     text-align: center;
//     position: relative;

//     .icon-close {
//       position: absolute;
//       top: 50%;
//       left: 20rpx;
//       transform: translateY(-50%);
//     }
//   }

//   .brand-list-section {
//     flex: 1;
//     padding: 0 22rpx;
//     margin-top: 10rpx;
//     background-color: #fff;

//     .content-list {
//       width: 100%;
//       height: calc(100vh - 130rpx);
//     }
//   }

// }

// 全部品牌
.brand-all-title {
	padding: 20rpx;
	border-bottom: 2rpx solid #eee;
	background: #ffffff;
}

// 品牌列表样式
.b-list {
	padding: 0rpx 20rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10rpx;

	.list-cell {
		box-sizing: border-box;
		width: 100%;
		padding: 10rpx 0px 0px 0px;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		border-bottom: 1px solid #eeeeee;
	}

	.brandcss {
		display: flex;
		flex-direction: row;

		.iconimg {
			image {
				width: 66rpx;
				height: 66rpx;
			}
		}
	}
}

.Brandcss {
	background: rgba(255, 255, 255, 1);
	border-radius: 10rpx;

	.list-cell {
		box-sizing: border-box;
		width: 100%;
		padding: 10rpx 0px 0px 0px;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		border-bottom: 1px solid #eeeeee;
	}

	.brandcss {
		display: flex;
		flex-direction: row;

		.iconimg {
			image {
				width: 66rpx;
				height: 66rpx;
			}
		}
	}
}

.brandcss {
	display: flex;
	flex-direction: row;

	&.title-box {
		padding: 0rpx 40rpx 20rpx 0;
		margin: 0 30rpx;
		border-bottom: 2rpx solid #eee;
	}
}

.iconimg {
	image {
		width: 66rpx;
		height: 66rpx;
	}
}

.branname {
	text-align: left;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	line-height: 80rpx;
	margin-left: 50rpx;
	width: 50%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.brannameZT {
	text-align: left;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fbb000;
	line-height: 80rpx;
	margin-left: 50rpx;
	width: 50%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.allbran {
	font-size: 34rpx;
	color: #333333;
}

.carnum {
	margin-top: 10rpx;
	width: 30%;
	text-align: right;
	font-size: 32rpx;
	color: #666666;
}

.Spin {
	// width: 100rpx;
	padding-left: 20rpx;
}

/* 下展*/
.ppjiantougo {
	margin-top: 10rpx;
	width: 10%;
	text-align: center;
	font-size: 32rpx;
	color: #666666;
	transform: rotate(90deg);
	transition: 0.3s;
	padding-right: 20rpx;
}

/* 折叠 */
.ppjiantou {
	margin-top: 10rpx;
	width: 10%;
	text-align: center;
	font-size: 32rpx;
	color: #666666;
	transform: rotate(0deg);
	transition: 0.3s;
	padding-right: 20rpx;
}

.cartycss {
	display: flex;
	flex-direction: row;
}

.xiliename {
	text-align: left;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	line-height: 80rpx;
	margin-left: 114rpx;
	width: 520rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.list-cell2 {
	box-sizing: border-box;
	padding: 10rpx 0px 0px 0px;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	margin-left: 30rpx;
	line-height: 24px;
	background-color: #fff;
	border-bottom: 1px solid #eeeeee;
}

.xilienamezt {
	text-align: left;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fbb000;
	line-height: 80rpx;
	margin-left: 114rpx;
	width: 520rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.peizhibox {
	.peizhicss {
		background: #f6f6f6;
		border-radius: 10rpx;
		padding: 22rpx;
		width: 642rpx;

		.peizhi {
			padding: 4rpx 0rpx;
			display: flex;
			flex-direction: row;

			/* 未选 */
			.peizhixz {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-top: 3rpx;

				image {
					margin-left: 16rpx;
					width: 40rpx;
					height: 40rpx;
					transform: rotate(-90deg);
				}
			}

			/* 已选配置 */
			.peizhigo {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-top: 3rpx;

				image {
					margin-left: 16rpx;
					width: 40rpx;
					height: 40rpx;
					transform: rotate(0deg);
				}
			}

			.peizhiname {
				text-align: left;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-left: 90rpx;
				width: 520rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
}
.brandaLLBox {
	background-color: #f6f6f6;
	// height: 100vh;
	position: relative !important;
	// 字母索引
	.floor {
		position: absolute !important;
		top: 80rpx !important;
		right: 2rpx !important;
		width: 44rpx !important;
		// height: calc(100vh - 260rpx) !important;
		text-align: center;
		font-size: 20rpx;
		font-weight: bold;
		color: #fbb000 !important;
	}
}
 .region-list {
    height: 100vh;
    background-color: #fff;
    position: relative;
    
    .brand-title {
      padding: 26rpx 0;
      background-color: #fff;
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      text-align: center;
      position: relative;
    
      .icon-close {
        position: absolute;
        top: 50%;
        left: 20rpx;
        transform: translateY(-50%);
      }
    }
  }
  // 列表内容
  .list-content {
    height: 100%;
    
    .content-list {
      width: 100%;
      height: calc(100vh - 130rpx);
    }
  }
  
  //全部地区
  .addList {
    line-height: 100rpx;
    background-color: #fff;
    // border: 2rox solid red;
  }
  
  .abcd {
    text-indent: 25rpx;
    background-color: #eeeeee;
    line-height: 60rpx;
  }
  .city-text {
    padding: 12rpx 24rpx;
    // border-top: 1rpx solid #eee;
  }
  
  .alladdress {
    padding: 32rpx 45rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
  }
  
</style>
